<template>
  <div>
    <div >
    
    <el-container>
      <el-header class="header">
        <div>
          <span>
          <i v-if="!isCollapse" @click="changeMenu" class="iconfont el-icon-circle-plus"></i>
           <i v-else @click="changeMenu" class="iconfont el-icon-remove-outline"></i> 
    </span>
        </div>
        <el-dropdown>
          <div class="avatar-wrap">
            <img class="avatar" src="@/assets/logo.png" alt="">
           
            <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
          </div>
  <!--<span>
    下拉菜单<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
  </span>-->
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item> <el-button class="btn">设置</el-button></el-dropdown-item>
            <el-dropdown-item>
              <el-button @click="logout" class="btn">退出</el-button>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
    
    </el-container>

     </div>
    <!-- 内容区域--路由出口 -->
    <div class="content">
     <router-view/>
    </div>
  </div>
  
</template>

<script>
export default {
  props:['isCollapse'],
 
methods:{
  changeMenu(){
    // 点击切换按钮时，修改父组件的数据
    this.$emit('changeCollapse') //自定义事件

  },
  logout(){
    // 1.清空token
    localStorage.removeItem('token')
    // 2.跳转到登录界面
    this.$router.push('/')
  }
}
}
</script>

<style lang="less" scoped>
.header{
  height: 60px;
  background-color: #1e78bf;
  line-height: 50px;
  color:#fff;
  margin-top: -10px;
  display: flex;
  justify-content: space-between;
  .iconfont{
    font-size: 24px;
  }
  span{
    float: left;
   }


}
.avatar-wrap{

  align-items: center;
  position: relative;
  top: 15px;


  .avatar{
    width: 30px;
    height: 30px;
    border-radius: 100%;
    margin-right: 10px;
  }
}
.btn{
  border:0px
}

</style>